<script setup lang="ts">
  import { SettingOutlined, EditOutlined, DeleteOutlined, TableOutlined } from '@ant-design/icons-vue';

  const props = defineProps<{ index: number, id: number, name: string; title: string; role: string }>();

  const emit = defineEmits(['editForm', 'deleteForm']);
  const editForm = () => {
    emit('editForm', props);
  };
  const deleteForm = () => {
    emit('deleteForm', props);
  };
</script>

<template>
  <div class="form-item">
    <a-card hoverable class="card" :title="props.index">
      <template #extra>
        <a :href="'#/' + props.name">去编辑表单</a>
      </template>
      <template #actions>
        <EditOutlined @click="editForm" />
        <a-popconfirm title="确定要删除表单吗?" ok-text="确定" cancel-text="取消" @confirm="deleteForm">
          <DeleteOutlined style="color: red;" />
        </a-popconfirm>
      </template>
      <a-card-meta :title="props.title" :description="props.name">
        <template #avatar>
          <TableOutlined />
        </template>
      </a-card-meta>
    </a-card>
  </div>
</template>

<style lang="less" scoped>
  .form-item {
    margin: 10px;

    .card {
      min-width: 15vw;
    }
  }
</style>
